<script setup>
import { ref } from 'vue';

const msg = ref('你好世界小组件')

defineExpose({
  msg
})

// defineProps定义接收的数据, 在模板中直接可以使用
// 但是如果希望在 script 内部使用, 需要一个变量进行接收
// 父传子2, 接收
const props = defineProps({
  str: {
    type: String,
    default: '子组件默认值'
  }
})

console.log(props);

// 点击事件

// 获取触发事件的函数 emit, 相当于以前的 this.$emit
const emit = defineEmits(['myClick'])

const handleClick = () => {
  console.log('按钮被点击');
  // 子传父1, 触发自定义事件, 相当于 vue2 this.$emit
  emit('myClick', 123)
}
</script>

<template>
  <div class="childBox">
    <div>{{msg}}</div>
    <!-- 父传子3, 使用数据 -->
    <div>{{ str }}</div>
    <button @click="handleClick">触发事件</button>
  </div>
</template>

<style>
.childBox {
  padding: 10px;
  border: 1px solid salmon;
}
</style>

